<template>
    <a-card style="margin-top: 24px" :bordered="false" title="轮播图信息">
		<div slot="extra">
			  <a-radio-group v-model="type" @change="getList()">
			    <a-radio-button value="0">首页</a-radio-button>
			    <a-radio-button value="1">企业资质</a-radio-button>
			    <a-radio-button value="2">企业文化</a-radio-button>
			  </a-radio-group>
			<a style="margin-left: 20px;" href="#" @click="add()">新增</a>
		</div>
      <a-list size="large" :pagination="pagination">
        <a-list-item :key="index" v-for="(item, index) in data">
          <div slot="actions">
            <a @click="del(item)">删除</a>
          </div>
          <div slot="actions">
			  <a @click="edit(item)">编辑</a>
          </div>
          <div class="list-content">
            <div class="list-content-item banner-box">
               <img :src="vuex_src+item.src" alt="">
            </div>
            <div class="list-content-item">
              <span>类型</span>
              <p>{{item.type | bannerType}}</p>
            </div>
            <div class="list-content-item">
            </div>
          </div>
        </a-list-item>
      </a-list>
    </a-card>
</template>

<script>
  import TaskForm2 from './modules/TaskForm2'
  import {bannerList,bannerDelete} from  '@/api/banner.js'
	const data = []
  export default {
    name: 'banner',
    components: {
      TaskForm2
    },
    data () {
      return {
        data:[],
		type:'0',
        status: 'all',
		pagination: {
			showSizeChanger: true,
			pageSizeOptions: ['10', '20', '50'],
			current:1,
			pageSize: 10,
			total:0,
			onChange:(current, size)=>{
				this.pagination.current = current;
				this.pagination.pageSize = size;
				this.getList()
			},
			onShowSizeChange:(current, size)=>{
				this.pagination.current = current;
				this.pagination.pageSize = size;
				this.getList()
			}
		},
      }
    },
	filters:{
		bannerType(val){
			switch (val){
				case 0:
					return '首页'
				case 1:
					return '企业资质'
				case 2:
					return '企业文化'
					break;
				default:
					break;
			}
		}
	},
	mounted() {
		this.getList();
	},
    methods: {
		// 获取轮播图列表
		getList(){
			bannerList({page:this.pagination.current,size:this.pagination.pageSize,type:this.type}).then(res=>{
				this.data = res.data.list;
				this.pagination.total = res.data.total
			})
		},
      add () {
		  let that = this;
        this.$dialog(TaskForm2,
          // component props
          {
            record: {},
            on: {
              ok () {
				  that.getList()
                console.log('ok 回调')
              },
              cancel () {
                console.log('cancel 回调')
              },
              close () {
                console.log('modal close 回调')
              }
            }
          },
          // modal props
          {
            title: '新增',
            width: 700,
            centered: true,
            maskClosable: false
          })
      },
      edit (record) {
		  let that = this;
        this.$dialog(TaskForm2,
          // component props
          {
            record,
            on: {
              ok () {
				   that.getList()
                console.log('ok 回调')
              },
              cancel () {
                console.log('cancel 回调')
              },
              close () {
                console.log('modal close 回调')
              }
            }
          },
          // modal props
          {
            title: '编辑',
            width: 700,
            centered: true,
            maskClosable: false
          })
      },
	  del(item){
		  bannerDelete({id:item.id}).then(res=>{
			  this.getList()
		  })
	  }
    }
  }
</script>

<style lang="less" scoped>
.ant-avatar-lg {
    width: 48px;
    height: 48px;
    line-height: 48px;
}

.list-content-item {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;
    span {
        line-height: 20px;
    }
    p {
        margin-top: 4px;
        margin-bottom: 0;
        line-height: 22px;
    }
}
.banner-box{
  width: 400px;
  height: 225px;
  img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
</style>
